<template>
  <div class="my-card">
    <!-- 模仿饿了么card组件 --- 自己封装实现card组件 -->
    <div class="title">
      <!-- <span>卡片名称</span>
      <a>操作</a> -->
      <!-- slot插槽：本质上就是一个占位符，
      将来是用组件的时候插入的内容会找到该插槽并替换它渲染到这个位置上 -->
      <!-- 具有name的slot插槽，我们叫具名插槽 ,当封装的组件内需要用到多个
      插槽来实现功能的时候，此刻就可以用到具名插槽来区分-->
      <slot name="title" />
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.my-card{
    width: 100%;
    min-width: 100px;
    box-shadow: 0px 0px 10px #a29d9d;
    border-radius: 8px;
    .title{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
    }
    .content{
        padding: 20px;
    }
}
</style>
